<!--
 * @Description:
 * @Version: 1.0
 * @Autor: haozhuang
 * @Date: 2020-04-28 14:34:17
 * @LastEditors: haozhuang
 * @LastEditTime: 2020-05-07 17:39:37
 -->
<template>
  <el-dialog
    :title="fileShareData.title"
    :visible.sync="fileShareData.dialogFormVisible"
    @close="handleClose"
  >
    <el-form ref="ruleForm" :model="fileShareData">
      <el-form-item
        label=""
        :label-width="80"
        prop="description"
      >
        <el-select
          v-model="fileShareData.userid"
          filterable
          placeholder="请选择"
          value-key="userid"
          style="width:100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.realName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="colseDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { mapGetters } from 'vuex'
// import uploader from '@/components/uploader'
import { getUserListByProject } from '@/api/jurisdiction'
import { fileShare } from '@/api/file'
export default {
  name: 'Home',
  components: {},
  props: {
    fileShareData: {
      type: Object,
      default: function() {
        return {
          title: '',
          dialogFormVisible: false,
          fileid: '',
          userid: ''
        }
      }
    }
  },
  data() {
    return {
      userList: []
    }
  },
  computed: {},
  created() {
    this.getUserListByProject()
  },
  methods: {
    getUserListByProject() {
      console.log()
      getUserListByProject()
        .then(result => {
          const { data } = result
          this.userList = data
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fileShare()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fileShare() {
      fileShare(this.fileShareData.fileid, this.fileShareData.userid)
        .then(result => {
          this.colseDialog()
        })
        .catch(err => {
          console.log(err)
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    colseDialog() {
      this.$emit('colseDialog')
    },
    handleClose() {
      this.resetForm('ruleForm')
    }
  }
}
</script>
<style  >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
</style>
